<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>报表管理</title>

    <script src="/static/js/polyfill.min.js"></script>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/heyui.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/less.min.js"></script>
    <script src="/static/js/api.js"></script>
    <script src="/static/js/browser.min.js"></script>
    <link rel="stylesheet" href="/static/css/index.css"/>
</head>

<body>
<div class="h-panel" id="add">
    <div class="h-panel-bar">
        <span class="h-panel-title">新增</span>
    </div>
    <div class="h-panel-body">
        <div>
            <h-form ref="form" label-position="left" :label-width="110" :rules="verify" mode="twocolumn"
                    :model="model">
                <h-formitem label="主键" prop="id">
                    <input type="text" v-model="model.id"/>
                </h-formitem>
                <h-formitem label="报表名称" prop="name">
                    <input type="text" v-model="model.name"/>
                </h-formitem>
                <h-formitem label="展示参数" prop="params" single>
                    <input type="text" v-model="model.params"/>
                </h-formitem>
                <h-formitem label="函数定义" single>
                    <h-taginput v-model="model.funcType"
                                placeholder="求和：SUM(KEY) 最大值：MAX(KEY) 最小值：MIN(KEY)"></h-taginput>
                </h-formitem>
                <h-formitem label="列操作">
                    <div class="h-input-group">
                        <input type="text" ref="title" placeholder="表列名"/>
                        <input type="text" ref="key" placeholder="SQL列名"/>
                        <button class="h-btn h-btn-green" @click="colAdd">确定</button>
                    </div>
                </h-formitem>
                <h-formitem label="表头" single>
                    <h-select type="object" v-model="select" :datas="data" :multiple="true"></h-select>
                </h-formitem>
                <h-formitem label="分组操作">
                    <div class="h-input-group">
                        <input type="text" v-model="gName" placeholder="分组名称"/>
                        <h-select type="object" v-model="gStart" :datas="data"></h-select>
                        <h-select type="object" v-model="gEnd" :datas="data"></h-select>
                        <button class="h-btn h-btn-green" @click="groupAdd">确定</button>
                    </div>
                </h-formitem>
                <h-formitem label="分组表头" single>
                    <h-taginput v-model="model.groupTitle" placeholder="显示标题|开始[列标题]|结束[列标题]" wordlimit="100000"
                                limit="1000000">
                </h-formitem>
                <h-formitem label="查询语句" prop="execSql" single>
                    <h-radio v-model="model.type" :datas="type"></h-radio>
                    <h-radio v-model="model.enCode" :datas="encode" v-show="model.type == '.csv'||model.type == '.txt'"></h-radio>
                    <textarea rows="15" v-model="model.execSql" placeholder="
                    条件标示：$where 。
                    判断：if ?p1 == '' { 拼接sql } 或 if ?p1 != '' { 拼接sql }。
                    分表：if ?startDate != '' {[30-TABLE1,60-TABLE2]} 查询。30天内查询表1,60天内查询表2,条件不满足查询最后一个条件。
                    "></textarea>
                </h-formitem>
                <h-formitem label="查询条件" single>
                    <h-taginput v-model="model.sqlWhere" placeholder="示例：and name = ?name" wordlimit="100000"
                                limit="1000000">
                </h-formitem>
            </h-form>
        </div>
    </div>
    <div class="h-panel-bar" align="center">
        <button class="h-btn" @click="back">取消</button>
        <button class="h-btn h-btn-blue" :loading="loading" @click="submit">确认</button>
    </div>
</div>
<script type="text/babel">
    HeyUI.config('dict.keyName', "keyName");
    HeyUI.config('dict.titleName', "titleName");
    new Vue({
        el: "#add",
        created() {
            this.oprType = '{{.id}}';
            if (this.oprType) {
                api.get("/item/" + this.oprType).then(res => {
                    if (res.data.length == 1) {
                        this.model = res.data[0];
                        for (let index in this.model.colsEnName) {
                            let item = {
                                keyName: this.model.colsEnName[index],
                                titleName: this.model.colsTitle[index],
                            };
                            this.data.push(item);
                            this.select.push(item);
                        }
                    }
                })
            }
        },
        data() {
            return {
                gName: '',
                gStart: {},
                gEnd: {},
                select: [],
                data: [],
                oprType: '',
                loading: false,
                encode: [{titleName: 'UTF-8', keyName: ''}, {titleName: 'GBK', keyName: 'GBK'}
                    , {titleName: 'GB2312', keyName: 'GB2312'}, {titleName: 'GB18030', keyName: 'GB18030'}],
                type: [{titleName: 'EXCEL', keyName: '.xlsx'}, {titleName: 'CSV', keyName: '.csv'}, {titleName: 'TXT', keyName: '.txt'}],
                verify: {
                    required: [
                        'id',
                        'name',
                        'execSql',
                    ]
                },
                model: {
                    id: '',
                    name: '',
                    colsTitle: [],
                    groupTitle: [],
                    colsEnName: [],
                    funcType: [],
                    execSql: '  where 1=1 $where ',
                    sqlWhere: [],
                    params: '',
                    type: '.xlsx',
                    enCode: ''
                }
            }
        },
        methods: {
            back() {
                location.href = "/";
            },
            submit() {
                let validResult = this.$refs.form.valid();
                if (!validResult.result) {
                    return false;
                }
                this.loading = true;
                let colsTitle = new Array();
                let colsEnName = new Array();
                for (let index in this.select) {
                    colsTitle.push(this.select[index].titleName);
                    colsEnName.push(this.select[index].keyName);
                }
                this.model.colsTitle = colsTitle;
                this.model.colsEnName = colsEnName;
                if (this.model.id == this.oprType) {
                    api.put("/report/" + this.model.id, this.model).then(res => {
                        if (res.data.code == 200) {
                            location.href = "/";
                        }
                        this.loading = false;
                        this.$Message(res.data.msg);
                    });
                } else {
                    api.post("/report", this.model).then(res => {
                        if (res.data.code == 200) {
                            location.href = "/";
                        }
                        this.loading = false;
                        this.$Message(res.data.msg);
                    });
                }
            },
            colAdd() {
                var item = {"keyName": this.$refs.key.value, "titleName": this.$refs.title.value};
                var index = this.data.findIndex(item => item.titleName === this.$refs.title.value);
                var sIndex = this.select.findIndex(item => item.titleName === this.$refs.title.value);
                if (index != -1) {
                    this.data.splice(index, 1);
                }
                if (sIndex != -1) {
                    this.select.splice(sIndex, 1);
                }
                if (this.$refs.key.value != "") {
                    this.data.push(item);
                    this.select.push(item);
                }
                this.$Message("成功");
            },
            groupAdd() {
                var gName = this.gName;
                var gStart = this.gStart.titleName;
                var gEnd = this.gEnd.titleName;

                if (!!gName && !!gStart && !!gEnd) {
                    this.model.groupTitle.push(gName + "|" + gStart + "|" + gEnd);
                }
            }
        },
    })
</script>
</body>

</html>
